// webpack的配置文件：开发模式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const EslintWebpackPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 一个页面对应一个入口文件
    entry: {
        'index': './src/index.js',// 首页入口文件
        'list': './src/list.js',// 列表页入口文件
        'add': './src/add.js',// 添加商品入口文件
        'login': './src/login.js',// 登录入口文件
        'register': './src/register.js',// 注册入口文件
    },

    // 输出
    output: {
        path: path.join(__dirname,'dist'),// 设置打包输出的目录(会自动创建dist目录)
        filename: './[name]-[hash:4].js',// 设置打包输出的文件名(针对的是根据入口打包输出的js文件)
    },

    // 加载器
    module: {
        rules: [
            // 添加loader配置
            {
                // 正则：匹配.css结尾的资源
                test: /\.css$/i,
                // 匹配资源时先使用css-loader处理再使用style-loader处理
                use: ["style-loader", "css-loader"],
            },
            {
                // 正则：匹配.less结尾的资源
                test: /\.less$/i,
                // 匹配资源时先使用less-loader处理
                // 然后使用css-loader处理
                // 再使用style-loader处理
                use: [
                  'style-loader',
                  'css-loader',
                  'less-loader',
                ],
            },
            {
                // 正则：匹配图片资源
                test: /\.(png|jpe?g|gif)/i,
                type: 'asset',// 将背景图片打包到dist目录中
                generator: {
                    // 设置图片打包后在dist中的存储目录和名称
                    // [name] 占位符，使用资源原来的名称
                    // [ext] 占位符，使用资源原来的后缀名
                    // [hash:5] 占位符，使用5位哈希值作为文件名称
                    filename: './imgs/[hash:5][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        // 当图片小于10KB时，转成base64编码
                        // 优点：减少请求次数
                        // 缺点：体积会稍微变大
                        maxSize: 1024 * 10
                    }
                }
            },
            {
                // 正则：匹配字体图标资源
                test: /\.(eot|woff2?|ttf|svg)/i,
                type: 'asset',// 将字体图标资源打包到dist目录中
                generator: {
                    // 设置资源打包后在dist中的存储目录和名称
                    // [query] 占位符，使用原来的查询字符串
                    filename: './fonts/[name][ext][query]'
                }
            },
            {
                test: /\.js$/,// 需要babel编译的文件类型
                exclude: /node_modules/,// 排除需要babel编译的目录
                use: {
                    loader: 'babel-loader',
                    // options: {// 如果当前options配置项比较多，通常写在单独的配置文件中
                    //     // presets预设
                    //     // @babel/preset-env 智能预设（可以使用最新的JS语法）
                    //     presets: ['@babel/preset-env']
                    // }
                }
            },
        ]
    },

    // 插件
    plugins: [
        // 添加plugin配置
        new HtmlWebpackPlugin({
            // 以public/index.html文件作为模板打包生成一个新的html文件
            template: './public/index.html',
            // 设置打包后生成的html文件名称和目录（自动引入index-hash4.js文件）
            filename: './index.html',
            chunks: ['index'],// 设置对应关系（当前html页面使用index入口打包出来的js脚本）
            favicon: './public/favicon.ico' // 打包网页图标
        }),
        new HtmlWebpackPlugin({
            // 以public/list.html文件作为模板打包生成一个新的html文件
            template: './public/list.html',
            // 设置打包后生成的html文件名称和目录（自动引入list-hash4.js文件）
            filename: './list.html',
            chunks: ['list'],// 设置对应关系（当前html页面使用list入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/add.html文件作为模板打包生成一个新的html文件
            template: './public/add.html',
            // 设置打包后生成的html文件名称和目录（自动引入add-hash4.js文件）
            filename: './add.html',
            chunks: ['add'],// 设置对应关系（当前html页面使用add入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/login.html文件作为模板打包生成一个新的html文件
            template: './public/login.html',
            // 设置打包后生成的html文件名称和目录（自动引入login-hash4.js文件）
            filename: './login.html',
            chunks: ['login'],// 设置对应关系（当前html页面使用login入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/register.html文件作为模板打包生成一个新的html文件
            template: './public/register.html',
            // 设置打包后生成的html文件名称和目录（自动引入register-hash4.js文件）
            filename: './register.html',
            chunks: ['register'],// 设置对应关系（当前html页面使用register入口打包出来的js脚本）
        }),
        new EslintWebpackPlugin({
            // 指定检查哪个目录
            context: './src',
            // 排除哪个目录不检查
            exclude: './src/lib'
        }),
    ],

    // 模式
    mode: 'development',// 开发模式

    // 开发服务器
    devServer: {
        host: 'localhost',// 服务的主机名
        port: 8080,// 服务的端口号
        open: true,// 自动在默认浏览器打开页面
        hot: true,// 模块热替换（自动刷新）

        // 页面地址：http://localhost:8080/
        // 请求地址：http://localhost:8080/api/users/login
        // 匹配到请求路径开头为/api时，代理转发到目标地址 http://localhost:9090/users/login
        proxy: {// 代理配置
            '/api': {// 代理路径 /api
                target: 'http://localhost:9090',//目标地址
                pathRewrite: {'^/api':''},// 请求路径开头为/api时重写为空串
            }
        }
    }
};

